<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示告警警戒值列表</title>
    <script src="../layui/layui.all.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<script type="text/html" id="bardemoTop">
    <a href="#" class="layui-btn layui-btn-normal" lay-event="add"><i class="layui-icon layui-icon-addition"
                                                                      style="font-size: 18px; color: #FFFFFF;"></i>添加</a>

</script>
<!--添加-->
<form class="layui-form" action="" id="addLimitForm" style="display: none">
    <div class="layui-form-item">
        <label class="layui-form-label">cpu负载警戒值</label>
        <div class="layui-input-inline">
            <input type="text" name="cpuLimit" required lay-verify="required"
                   placeholder="请输入cpu负载警戒值" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">内存使用率警戒值</label>
        <div class="layui-input-inline">
            <input type="text" name="memoryLimit" required lay-verify="required"
                   placeholder="请输入内存使用率警戒值" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">硬盘使用率警戒值</label>
        <div class="layui-input-inline">
            <input type="text" name="diskLimit" required lay-verify="required"
                   placeholder="请输入硬盘使用率警戒值" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">服务器Ip</label>
        <div class="layui-input-inline">
            <input type="text" name="serverIp" required lay-verify="required"
                   placeholder="请输入服务器Ip" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">告警邮箱</label>
        <div class="layui-input-inline">
            <input type="text" name="emailAddress" required lay-verify="required"
                   placeholder="请输入告警邮箱" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn checkAdd" lay-submit lay-filter="addLimit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<form class="layui-form" action="" id="updateLimitForm" style="display: none" lay-filter="updateLimitFormFilter" >
    <input type="hidden" name="id">
    <div class="layui-form-item">
        <label class="layui-form-label">cpu负载警戒值</label>
        <div class="layui-input-inline">
            <input type="text" name="cpuLimit" required lay-verify="required"
                   placeholder="请输入cpu负载警戒值" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">内存使用率警戒值</label>
        <div class="layui-input-inline">
            <input type="text" name="memoryLimit" required lay-verify="required"
                   placeholder="请输入内存使用率警戒值" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">硬盘使用率警戒值</label>
        <div class="layui-input-inline">
            <input type="text" name="diskLimit" required lay-verify="required"
                   placeholder="请输入硬盘使用率警戒值" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">服务器Ip</label>
        <div class="layui-input-inline">
            <input type="text" name="serverIp" required lay-verify="required"
                   placeholder="请输入服务器Ip" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">告警邮箱</label>
        <div class="layui-input-inline">
            <input type="text" name="emailAddress" required lay-verify="required"
                   placeholder="请输入告警邮箱" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn checkAdd" lay-submit lay-filter="formUpdateLimit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="update">修改</a>
</script>
<script>
    layui.use(['table', 'form', 'jquery', 'util', 'upload'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var util = layui.util;
        var upload = layui.upload;

        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 400
            ,url: '/alarmLimit' //数据接口
            , toolbar: '#bardemoTop'
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": "", //解析提示文本
                    "count": res.totalElements, //解析数据长度
                    "data": res.content //解析数据列表
                };
            }
            ,page: true //开启分页
            ,cols: [[ //表头
                 {field: 'id', title: '编号', width:80, sort: true, fixed: 'left'}
                ,{field: 'cpuLimit', title: 'cpu负载',sort: true, width:120}
                ,{field: 'memoryLimit', title: '内存使用率',sort: true, width:120}
                ,{field: 'diskLimit', title: '硬盘使用率',sort: true, width:140}
                ,{field: 'serverIp', title: '服务器ip',sort: true, width:140}
                ,{field: 'emailAddress', title: '邮箱地址',sort: true, width:200}
                ,{field: 'createTime', title: '创建时间',sort: true, width:200}
                ,{ title: '操作',toolbar: '#barDemo', width:120}

            ]]
        });
        // 单元格工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'update'){
                //开始修改
                layer.open({
                    title: '修改警戒值',
                    type: 1,
                    content: $('#updateLimitForm'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    area: ['450px', '450px']
                });
                //将数据填充到上面的对话框里面
                //表单数据的填充
                form.val('updateLimitFormFilter', {
                    "id": obj.data.id // "name": "value"
                    ,"cpuLimit": obj.data.cpuLimit
                    ,"memoryLimit": obj.data.memoryLimit
                    ,"diskLimit": obj.data.diskLimit
                    ,"serverIp": obj.data.serverIp
                    ,"emailAddress": obj.data.emailAddress

                });

            }else if(layEvent === 'delete'){
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: "/alarmLimit?id="+data.id,
                        type: "DELETE",
                        dataType: "JSON",
                        success: function (ret) {
                            if (ret) {
                                layer.closeAll();//关闭对话框
                                table.reload('demo', {
                                    page: {
                                        curr: 1
                                    }
                                });
                                layer.msg("删除成功");
                            }else{
                                layer.msg("删除失败");
                            }
                        }
                    })
                })

            }
        });
        // 头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    document.getElementById("addLimitForm").reset();
                    layer.open({
                        type: 1,
                        content: $('#addLimitForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        , area: ['450px', '450px']
                    });
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        var ids = [];
                        for (var i = 0; i < data.length; i++) {
                            let id = data[i].id;
                            ids[i] = id;
                        }
                        layer.confirm('真的删除行么', function (index) {
                            $.ajax({
                                url: "${pageContext.request.contextPath}/questionFpa/delete.do?ids=" + ids,
                                type: "DELETE",
                                success: function (ret) {
                                    if (ret.code == 0) {
                                        layer.closeAll();//关闭对话框
                                        table.reload('demo', {
                                            page: {
                                                curr: 1
                                            }
                                        });
                                    }
                                    layer.msg(ret.msg);
                                }
                            });
                        })
                    }
            }
        });
        //添加
        form.on('submit(addLimit)', function (data) {
            $.ajax({
                url: "/alarmLimit",
                type: "POST",
                data: data.field,
                // headers: {'content-type': 'application/json'},
                dataType: "JSON",
                success: function (ret) {
                    if (ret.id > 0) {
                        layer.closeAll();//关闭对话框
                        table.reload('demo', {
                            page: {
                                curr: 1
                            }
                        });
                    }
                    layer.msg("添加成功");
                }
            })
            return false;
        });
        //修改
        form.on('submit(formUpdateLimit)', function(data){
            //ajax方式提交表单数据，将数据保存至数据库中
            $.ajax({
                url:"/alarmLimit",
                type:"PUT",
                dataType:"JSON",
                data:data.field,
                success:function (ret) {
                    if(ret.id>0){
                        layer.closeAll();//关闭对话框
                        table.reload('demo', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                        layer.msg("修改成功");
                    }else{
                        layer.msg("修改失败");
                    }

                }
            });
            table.reload('demo', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    });
</script>
</body>

</html>
